import routes from "@/router"
import { useEffect, useState } from "react"
import { useNavigate, useRoutes, useLocation } from "react-router-dom"
import { Button } from "antd"

const NavigateC = () => {
  // navigate
  const navigate = useNavigate()

  // Layout 子路由列表
  const [layoutPageRoutes, setLayoutPageRoutes] = useState([])

  /* Effect */
  useEffect(() => {
    getLayoutChildrenRouteListFunc()
  }, [])

  // 获取 Layout 子路由列表函数
  const getLayoutChildrenRouteListFunc = () => {
    let layoutPageList = routes.filter((item) => {
      return item.name === "Layout"
    })[0].children
    setLayoutPageRoutes(layoutPageList)
    console.log("路由列表", layoutPageList)
  }

  // 路由项按钮点击事件
  const routeItemClick = (item) => {
    console.log("点击路由：", `${item.meta.title} ===> ${item.path}`)
    navigate(item.path)
  }

  return (
    <>
      <div>
        {/* 路由跳转按钮列表 */}
        {layoutPageRoutes.map((item, index) => (
          <Button
            type="primary"
            key={index}
            onClick={() => {
              routeItemClick(item)
            }}
          >
            {item.meta.title}
          </Button>
        ))}
      </div>
    </>
  )
}
export default NavigateC
